<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button class="filter-item" @click="handleAdd()" type="primary" icon="el-icon-plus">添加</el-button>
    </div>
    <el-table ref="multipleTable" v-loading="!pload" @selection-change="selectionChange" fit highlight-current-row border :data="tableData" row-key="id">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column label="序号" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column property="name" label="名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column property="url" label="网址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="更新日期" align="center" width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.updateTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUp(scope.$index, scope.row)">上移</el-button>
          <el-button size="mini" @click="handleDown(scope.$index, scope.row)">下移</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="filter-bottom">
      <el-button-group class="filter-item">
        <el-button @click="toggleSelection(-1)">全选</el-button>
        <el-button @click="toggleSelection(0)" :disabled="!selection.length">反向选择</el-button>
        <el-button @click="toggleSelection(1)" :disabled="!selection.length">取消选择</el-button>
        <el-button @click="toggleDel" :disabled="!selection.length">删除</el-button>
      </el-button-group>
    </div>

    <edit v-if="edit" :data="selectTable" @getData="getData"></edit>
  </div>
</template>

<script>
import * as api from '@/utils/api'
import waves from '@/directive/waves' // 水波纹指令
import Sortable from 'sortablejs'
import edit from './edit'
export default {
  directives: {
    waves
  },
  data() {
    return {
      tableData: [],
      selection: [],
      selectTable: {},
      search: {
        keyword: ''
      },
      pload: false,
      edit: false,
      sortable: null,
      newList: []
    }
  },
  components: {
    edit
  },
  created() {
    this.getData()
  },
  methods: {
    selectionChange(selection) {
      this.selection = selection
    },
    toggleSelection(s) {
      if (s === -1) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true)
        })
      }
      if (s === 0) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      }
      if (s === 1) {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleAdd() {
      this.selectTable = {}
      this.selectTable.method = 'add'
      this.edit = true
    },
    async handleDelete(index, row) {
      this.$confirm('确认要删除吗', { type: 'warning' }).then(async() => {
        try {
          await api.ltsNavRemove({ ids: row.id })
          this.$notify({ title: '删除成功', type: 'success', duration: 5000 })
          this.getData()
        } catch (e) {
          this.pload = true
        }
      })
    },
    toggleDel() {
      this.$confirm('确认要删除吗', { type: 'warning' }).then(async() => {
        const ids = this.selection.map((i, index) => {
          return i.id
        }).join(',')
        try {
          await api.ltsNavRemove({ ids: ids })
          this.$notify({ title: '删除成功', type: 'success', duration: 5000 })
          this.getData()
        } catch (e) {
          this.pload = true
        }
      })
    },
    handleEdit(index, row) {
      this.selectTable = JSON.parse(JSON.stringify(row))
      this.selectTable.method = 'edit'
      this.edit = true
    },
    async getData() {
      this.pload = false
      const Datas = await api.ltsNavList({
        pageNum: 1,
        pageSize: 1000,
        keyword: this.search.keyword
      })
      this.pload = true
      this.tableData = Datas.list
      this.newList = this.tableData.map(v => v.id)
      this.$nextTick(() => {
        this.setSort()
      })
    },
    handleFilter() {
      this.getData()
    },
    handleUp(index, row) {
      this.tableData[index] = this.tableData.splice(index - 1, 1, this.tableData[index])[0]
      this.handleOrder()
    },
    handleDown(index, row) {
      this.tableData[index] = this.tableData.splice(index + 1 === this.tableData.length ? 0 : index + 1, 1, this.tableData[index])[0]
      this.handleOrder()
    },
    async handleOrder() {
      const list = this.tableData.map((i, index) => {
        return i.id
      }).join(',')

      await api.ltsNavSort({ ids: list })
      this.$notify({ title: '排序成功', type: 'success', duration: 1000 })
    },
    setSort() {
      const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        onEnd: async evt => {
          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]
          this.tableData.splice(evt.newIndex, 0, targetRow)
          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
          await api.ltsNavSort({ ids: this.newList.join(',') })
          this.$notify({ title: '排序成功', type: 'success', duration: 2000 })
        }
      })
    }
  }
}
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
</style>